<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="请替换为您的关键字">
  <meta name="description" content="请替换为您的描述">
  <title>充电云平台</title>
  <!-- bower:css -->
  <!-- endbower -->
  <link rel="stylesheet" href="fonts/iconfont.css">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body class="bg-gray">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 nopadding">
        <!-- 搜索条 -->
        <div class="search">
          <form class="search-form">
            <input class="form-control" type="text">
            <span class="addon icon-search"></span>
            <a class="icon-scan" href="javascript:void(0);"></a>
          </form>
        </div>
        <!-- /搜索条 -->
      </div>
    </div>

    <!-- 广告轮播 -->
    <div class="row">
      <div class="col-xs-12 nopadding">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="imgs/banner-1.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="imgs/banner-2.png" alt="">
            </div>
            <div class="swiper-slide">
              <img src="imgs/banner-3.png" alt="">
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>

    <!-- /广告轮播 -->

    <!-- 筛选条 -->
    <div class="row">
      <div class="col-xs-12 nopadding">
        <div class="filter">
          <ul class="filterMenu">
            <li>
              <div class="dropdown">
                <a href="##" class="btn btn-link" id="smart_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">智能排序 <span class="caret"></span></a>
                <ul id="smart_dropdown" class="dropdown-menu" aria-labelledby="smart_sort">
                  <li><a href="#">评分最高</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">充电次数最多</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">电桩最多</a></li>
                </ul>
              </div>
            </li>
            <li>
              <div class="dropdown">
                <a href="##" class="btn btn-link" id="distance_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">距离 <span class="caret"></span></a>
                <ul id="distance_dropdown" class="dropdown-menu" aria-labelledby="distance_sort">
                  <li><a href="#">离我最近</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">选项二</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">选项三</a></li>
                </ul>
              </div>
            </li>
            <li>
              <div class="dropdown">
                <a href="##" class="btn btn-link" id="price_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">距离 <span class="caret"></span></a>
                <ul id="price_dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="price_sort">
                  <li><a href="#">价格低到高</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">价格高到低</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /筛选条 -->

    <!-- 当前定位 -->
    <div class="row">
      <div class="col-xs-12 currentPos">
        <i class="iconfont if-marker"></i>
        <span class="text-muted">深圳市南山区深南大道腾讯大厦附近</span>
        <a href="##" class="refreshPos text-muted"><i class="iconfont if-refresh pull-right"></i></a>
      </div>
    </div>
    <!-- /当前定位 -->

    <!-- 充电站列表 -->
    <div class="row">
      <div class="col-xs-12 nopadding">
        <div class="stationList">
          <ul>
            <li>
              <h4><a href="station.html">六约充电站</a><span class="tag">快充</span><span class="tag">24H</span></h4>
              <p class="text-muted">地址：深圳市南山区深南大道腾讯大厦附近</p>
              <ul class="exInfo">
                <li>
                  <img src="imgs/icon/icon_charge_port.png" alt="">
                  <span class="text-muted">空闲:131</span>
                </li>
                <li>
                  <img src="imgs/icon/icon_coin.png" alt="">
                  <span class="text-primary" data-toggle="modal" data-target="#cost_des">当前:1.6元/度</span>
                </li>
              </ul>
              <div class="navi">
                <a href="##" class="btn btn-primary">
                  <h4><i class="iconfont if-navi"></i>导航</h4>
                </a>
                <div>
                  <small class="text-muted">距您<500m</small>
                </div>
              </div>
            </li>
            <li>
              <h4>六约充电站<span class="tag">快充</span><span class="tag">24H</span></h4>
              <p class="text-muted">地址：六约新村环城西线</p>
              <ul class="exInfo">
                <li>
                  <img src="imgs/icon/icon_charge_port.png" alt="">
                  <span class="text-muted">空闲:131</span>
                </li>
                <li>
                  <img src="imgs/icon/icon_coin.png" alt="">
                  <span class="text-primary">当前:1.6元/度</span>
                </li>
              </ul>
              <div class="navi">
                <a href="##" class="btn btn-primary">
                  <h4><i class="iconfont if-navi"></i>导航</h4>
                </a>
                <div>
                  <small class="text-muted">距您<500m</small>
                </div>
              </div>
            </li>
            <li>
              <h4>六约充电站<span class="tag">快充</span><span class="tag">24H</span></h4>
              <p class="text-muted">地址：六约新村环城西线</p>
              <ul class="exInfo">
                <li>
                  <img src="imgs/icon/icon_charge_port.png" alt="">
                  <span class="text-muted">空闲:131</span>
                </li>
                <li>
                  <img src="imgs/icon/icon_coin.png" alt="">
                  <span class="text-primary" data-toggle="modal" data-target="#cost_des">当前:1.6元/度</span>
                </li>
              </ul>
              <div class="navi">
                <a href="##" class="btn btn-primary">
                  <h4><i class="iconfont if-navi"></i>导航</h4>
                </a>
                <div>
                  <small class="text-muted">距您<500m</small>
                </div>
              </div>
            </li>
            <li>
              <h4>六约充电站<span class="tag">快充</span><span class="tag">24H</span></h4>
              <p class="text-muted">地址：六约新村环城西线</p>
              <ul class="exInfo">
                <li>
                  <img src="imgs/icon/icon_charge_port.png" alt="">
                  <span class="text-muted">空闲:131</span>
                </li>
                <li>
                  <img src="imgs/icon/icon_coin.png" alt="">
                  <span class="text-primary" data-toggle="modal" data-target="#cost_des">当前:1.6元/度</span>
                </li>
              </ul>
              <div class="navi">
                <a href="##" class="btn btn-primary">
                  <h4><i class="iconfont if-navi"></i>导航</h4>
                </a>
                <div>
                  <small class="text-muted">距您<500m</small>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- /充电站列表 -->
  </div>

  <!-- 电费表格modal -->
  <div class="modal fade" id="cost_des" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title text-center">费用说明</h4>
        </div>
        <div class="modal-body">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>时间段</th>
                <th>电费</th>
                <th>服务费</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>09:00-11:30</td>
                <td>1.06</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>14:00-16:30</td>
                <td>1.06</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>19:00-21:00</td>
                <td>1.06</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>11:30-14:00</td>
                <td>0.70</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>07:00-09:00</td>
                <td>0.70</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>16:30-19:00</td>
                <td>0.70</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>21:00-23:00</td>
                <td>0.7</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>23:00-24:00</td>
                <td>0.7</td>
                <td>0.45</td>
              </tr>
              <tr>
                <td>00:00-07:00</td>
                <td>0.70</td>
                <td>0.45</td>
              </tr>
            </tbody>
          </table>
          <p class="text-right text-muted">单位：元/度</p>
        </div>
      </div>
    </div>
  </div>
  <!-- /电费表格modal -->

<!-- bower:js -->
<!-- endbower -->
<script>
  $('.icon-scan').click(function() {
    alert('打开微信扫一扫');
  })

  $('.refreshPos').click(function() {
    alert('刷新当前位置');
  })

  // 初始化图片轮播插件
  var swiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay: true,
    pagination: {
      el: '.swiper-pagination'
    }
  })

  // console.info($('.stationList li').width());
  // console.info($('.navi').outerWidth());
  var content_width = $('.stationList li').width() - $('.navi').outerWidth();
  $('.stationList p').css('width', content_width);
</script>
</body>
</html>
